<template>
    <div>
        <c-row>
            <c-col span="6">
                <c-tree ref="cTreeRef" :data="treeData" :setting="setting"></c-tree>
            </c-col>
            <c-col span="12">
                <div>
                    <div>数据：</div>
                    <pre class="code">{{ JSON.stringify(this.treeData, null, 4) }}</pre>
                </div>
            </c-col>
            <c-col span="6">
                <c-button @click="handleClick()" type="primary">勾选</c-button>
            </c-col>
        </c-row>

    </div>
</template>

<script>
    export default {
        name: "Menu",
        data() {
            return {
                treeData: [{
                    name: '总行',
                    id: 1,
                    open: true,
                    children: [
                        {name: '分行1', id: 11, icon: 'add'},
                        {
                            name: '分行2', id: 12, checked: true,
                            children: [
                                {name: '支行2-1', id: 121},
                                {
                                    name: '支行2-2', id: 122,
                                    children: [
                                        {name: '支行2-2-1', id: 1221},
                                        {name: '支行2-2-2', id: 1222},
                                        {name: '支行2-2-3', id: 1223}
                                    ]
                                },
                                {name: '支行2-3', id: 123, nocheck: true},
                                {name: '支行2-4', id: 124},
                                {name: '支行2-5', id: 125}
                            ]
                        },
                        {
                            name: '分行3', id: 13,
                            children: [
                                {name: '支行3-1', id: 131},
                                {name: '支行3-2', id: 132},
                                {name: '支行3-3', id: 133},
                                {name: '支行3-4', id: 134},
                                {name: '支行3-5', id: 135}
                            ]
                        },
                        {name: '分行4', id: 14},
                    ]
                }],
                setting: {
                    check: {
                        show: 'checkbox',
                        checkedUp: true, // 被勾选后是否关联上级
                        checkedDown: true, // 被勾选后是否关联下级
                        checkCancelUp: true, // 取消勾选后是否关联上级
                        checkCancelDown: true, // 取消勾选后是否关联下级
                    }
                },
            };
        },
        methods: {
            handleClick() {
                this.treeData[0].children[1].checked = !this.treeData[0].children[1].checked;
                this.$refs['cTreeRef'].build();
            }
        }
    };
</script>

<style scoped lang="less">
    .code {
        padding: 10px;
        ont-size: 12px;
        border: 1px solid #dedede;
        max-height: 400px;
        overflow: auto;
    }
</style>
